<template>
    <div class="table_box">
        <TableCard title="在岗导游管理" :table_data="table_data" :table_item="table_item" :user="'on_duty_tour_guide'"
            @SizeChange="SizeChange" @currentPage="currentPage" @is_add_dialog_visible="is_add_dialog_visible"
            @row_id="row_id" @add="add" :total="total" :loading="loading" />
        <el-dialog title="在岗导游信息维护" :visible.sync="add_dialog_visible" width="500px">
            <el-form label-position="right" :model="add_form" :rules="rules" ref="add_form_ref">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="姓名">
                            <el-input v-model="add_form.name" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学历">
                            <el-select v-model="add_form.academic_degree" placeholder="点击选择">
                                <el-option v-for="item in academic" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="毕业院校">
                            <el-input v-model="add_form.school"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="专业">
                            <el-input v-model="add_form.speciality"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="导游证号">
                            <el-input v-model="add_form.information"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="旅行社名">
                            <el-select v-model="add_form.affiliated_agency" placeholder="点击选择">
                                <el-option v-for="item in agencies" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_dialog_visible = false" size="medium">取 消</el-button>
                <el-button type="primary" @click="submit" size="medium">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TableCard from '@/components/reusable_components/table_card.vue'
import { rules } from '@/utils/rules';
export default {
    components: {
        TableCard,
    },

    data() {
        return {
            table_item: [
                // { key: 'index', value: '序号', default: '' },
                { key: 'name', value: '姓名', default: '' },
                { key: 'gender', width: '50', value: '性别', default: '' },
                { key: 'phone', value: '联系方式', default: '' },
                { key: 'information', value: '导游证编号', default: '' },
                { key: 'agency_name', value: '所属旅行社', default: '' },
                { key: 'itinerary_name', value: '旅行单', default: '' },
            ],
            table_data: [],
            pageSize: 10,
            current_page: 1,
            add_dialog_visible: false,
            delete_row: 0,
            row_index: 0,
            // 新增
            add_form: {
                id: 0,
                name: '',
                academic_degree: '',
                school: '',
                speciality: '',
                affiliated_agency: '',
            },

            rules: null,

            agencies: [],

            academic: [
                { id: 0, name: '博士研究生' },
                { id: 1, name: '硕士研究生' },
                { id: 2, name: '大学本科' },
                { id: 3, name: '大学专科' },
                { id: 4, name: '普通高中' },
                { id: 5, name: '职业高中' },
            ],
            total: 0,

            is_add: false,
            total: 0,
            loading: true,
        }
    },

    mounted() {
        this.SizeChange(this.pageSize);
        this.currentPage(this.current_page);
        // this.rules = rules
        this.get_guides()
        this.get_agencies()
    },

    created() {
        this.rules = rules

    },
    methods: {

        // 根据子组件传来的信息，显示/关闭对话框
        is_add_dialog_visible(val) {
            this.add_dialog_visible = val
            if (this.add_dialog_visible === true) this.get_agencies
        },

        // 获取子组件传来的数据，当分页数据变化时，发送请求
        async SizeChange(size) {
            this.pageSize = size;
            this.get_guides()
        },

        async currentPage(page) {
            this.current_page = page;
            this.get_guides()
        },

        // async get_total_number() {
        //     try {
        //         const res = await this.$http.post("/findAllGuide", {
        //             pageNum: this.current_page,
        //             pageSize: this.pageSize
        //         });
        //         if (res.data.code === 2000) {
        //             this.total = res.data.data.information.length
        //         }
        //     } catch (error) {
        //         // console.log(error);
        //     }
        // },

        async get_guides() {
            this.loading = true
            try {
                const res = await this.$http.post('/findAllGuide', {
                    pageNum: this.current_page,
                    pageSize: this.pageSize
                });
                // console.log(res)
                this.total = res.data.data.size
                this.table_data = res.data.data.information
                this.loading = false
            } catch (error) {
            }
        },

        // 获取子组件传来的row_id
        row_id(val) {
            this.row_index = val
            this.add_form = this.table_data.find(item => item.id === val)
        },


        async get_agencies() {
            try {
                const res = await this.$http.get("/findAllAgency");
                // 成功后关闭窗口
                this.agencies = res.data.data
                this.add_dialog_visible = false
            } catch (error) {
                // console.log(error);
            }
        },


        add(val) {
            this.is_add = val
        },

        async submit() {
            if (this.is_add)
                try { //后端哥哥们没写这个接口，呜呜呜
                    // const res = await this.$http.post('/addHotels', {
                    //     // 携带数据
                    //     id: this.row_index,
                    //     gender: this.add_form.gender,
                    //     phone: this.add_form.phone,
                    //     information: this.add_form.information,
                    //     agency_name: this.add_form.agency_name,
                    //     itinerary_name: this.add_form.itinerary_name
                    // });
                    // if (res.data.code === 2000) {
                    //     this.$message.success('成功')
                    // } else {
                    //     this.$message.error('失败')
                    // }
                    // // 成功后关闭窗口
                    // this.add_dialog_visible = false
                } catch (error) { }
            else
                try {
                    const res = await this.$http.post('/updateGuideById', {
                        // 携带数据
                        id: this.row_index,
                        gender: this.add_form.gender,
                        phone: this.add_form.phone,
                        information: this.add_form.information,
                        affiliated_agency: this.add_form.affiliated_agency,
                        itinerary_name: this.add_form.itinerary_name
                    });
                    if (res.data.code === 2000) {
                        this.$message.success('成功')
                        this.$router.go(0)
                    } else {
                        this.$message.error('失败')
                    }
                    // 成功后关闭窗口
                    this.add_dialog_visible = false
                } catch (error) { }
        },

    },

}
</script>

<style lang="less" scoped>
.table_box {
    width: 100%;
    height: 100%;
}

.el-input {
    display: inline-block;
}
</style>